<script setup lang="ts">
import {h, ref, type Component, defineEmits} from 'vue'

import { useEditorStore } from '../../../store'
import { storeToRefs } from 'pinia'

const editorStore = useEditorStore()
const { headings } = storeToRefs(editorStore)
const emits = defineEmits(['collapse'])
import {Right} from "@icon-park/vue-next"
import {Left} from "@icon-park/vue-next"
import {ElMessage} from "element-plus";
/**
 * 左侧区域
 */
const handleHeadingClick = (data) => {
  setActiveHeading(data)
}

const isVisibility = ref(true);
const setVisible = ()=>{
  isVisibility.value = true;
  const body = document.getElementById("outline-body");
}
const setUnVisible = ()=>{
  isVisibility.value = false;
  const body = document.getElementById("outline-body");
}
defineExpose({
  setUnVisible,
  setVisible
});
</script>

<template>
  <div class="outline__list" style="display: flex; flex-direction: row;">
    <div style="height: 100% ;align-items: center;">
      <el-button id="toggle-btn" plain color="rgb(240, 240, 240, 0.5)" @click="emits('collapse')">
        <right v-if=isVisibility theme="outline" size="24" fill="#000000"/>
        <left v-if=!isVisibility theme="outline" size="24" fill="#000000"/>
      </el-button>
    </div>
    <div id="outline-body" class="outline__list" v-if=isVisibility style="display: flex; flex-direction: column;">
      <h2 v-if=isVisibility style="margin-left: 5px;font-size: 35px">大纲</h2>
      <template v-for="(heading, index) in headings" :key="index">
        <div @click="handleHeadingClick(heading.text)" class="outline__item" :class="`outline__item--${heading.level}`">
          {{heading.text}}
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
#toggle-btn {
  height: 100%;
  border-width: 0px;
  margin-right: auto;
  border-radius: 15px 0 0 15px;
  padding: 0;
  flex: 0 0 15px;
}

.outline {
  opacity: 0.75;
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: rgba(black, 0.1);
  width: 100%;

  .left-aligned-button {
    justify-content: flex-start; /* 对齐内容到起始位置（左边） */
    text-align: left; /* 文字左对齐 */
    padding-left: 16px; /* 根据需要调整内边距 */
  }

  &__list {
    list-style: none;
    font-size: 18px;
    padding: 0;
    max-width: 95%;
  }

  &__item {
    justify-content: flex-start; /* 对齐内容到起始位置（左边） */
    text-align: left; /* 文字左对齐 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    a:hover {
      opacity: 0.5;
    }
    &--1 {
      font-size: 30px;
      font-weight: bold;
      height: 50px;
    }
    &--2 {
      font-size: 25px;
      font-weight: bold;
      height: 40px;
      margin-left: 20px;
    }
    &--3 {
      font-size: 20px;
      font-weight: bold;
      height: 35px;
      margin-left: 40px;
    }
    &--4 {
      font-size: 15px;
      font-weight: bold;
      height: 30px;
      margin-left: 60px;
    }
  }

  &__item:hover {
    cursor: pointer;
    background-color: #f9f9f9;
    border-radius: 15px;
  }
}
</style>
